.editor-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  margin: 1rem 0rem;
  background: #f7f7f7;
  box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
  min-height: 4rem;
  user-select: none;

  &--dragging {
    box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.25), 0 1px 3px 0 rgba(63, 63, 68, 0.75);
  }

  &.with-separator {
    margin-top: 4rem;
  }

  &--icon, &--image {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background: #D7D7D7;
    width: 4rem;
    height: 4rem;
  }

  &--icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &--image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  &--label {
    margin-left: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    a {
      color: #555;
      &:hover {
        text-decoration: none;
      }
    }
  }

  &--actions {
    margin-left: auto;
    margin-right: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;

    &--button {
      height: 17px;
    }
  }

  &--edit-button {
    height: 17px;
  }

  &--drag-handle {
    margin-left: 1rem;
    cursor: move;

    i {
      position: relative;
      top: 2px;
      font-size: 1.8rem;
    }
  }
}

.editor-list-add {
  margin-top: 1rem;

  &--button {
    display: block;
    width: 100%;
    border-radius: 3px;
    padding: 1rem 1.2rem;
    border: dashed 1px #e3e4e7;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    background: $white;

    &:hover {
      text-decoration: none;
    }
  }

}
